<template>
 <div>
     <div class="recommend-title">周末去哪儿</div>
     <ul>
         <li class="item border-bottom" v-for="item of list" :key="item.id">
            <div class="item-img-wrapper">
                <img  class="item-img" :src="item.imgUrl"/>
            </div>             
                 
             <div class="item-info">
                 <p class="item-title">{{item.title}}</p>
                 <p class="item-desc">{{item.desc}}</p>
                 
             </div>
         </li>
     </ul>
 </div>
    
</template>

<script>
export default {
    name:'HomeWeekend',
    props:{
        list:Array
    }
    
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.recommend-title
    background:#eee
    line-height:40px
    text-indent:10px

.item-img-wrapper
    overflow:hidden
    height:0
    padding-bottom:33.4%
    .item-img
        width:100%
.item-info
        padding:5px
        
    .item-title
        line-height :27px
        font-size:16px
        ellipsis()
        overflow :hidden
     .item-desc
        line-height :20px 
        color:#ccc
        ellipsis()
        overflow :hidden

                



    


</style>
